<template>
  <div class="incomeComp">
    <div class="radar">
      <div class="workTopTitle">
        <div class="fl">
          <div class="title">{{leftTitle}}</div>
        </div>
      </div>
      <div class="radarArea">
      <div class="chartsArea">
        <div class="barContainer">
        <!--  <bar :barData="barData" :areaName="areaName"></bar> -->
         <lineData :completeData="completeData" :name="areaName"></lineData>
        </div>
      </div>
<!--      <div class="detailList">
        <ul>
          <li v-for="(item,index) in areaDataList" :key="index" :style="{color:item.color}"><span>{{item.areaName}}</span><span>{{item.thisYearLj}}</span><span>{{item.hbAmt}}</span></li>
        </ul>
      </div> -->
     </div>
    </div>
    <div class="table">
      <div class="workTopTitle">
        <!-- <div class="fr" v-if="chartsState == 2"> -->
        <div class="fr" >
          <div class="option">
            <div >
              <p>业务：</p>
              <el-select style="width:150px" v-model="barSelect" value-key="id" placeholder="请选择" @change="changeType">
                <el-option v-for="item in barTable" :key="item.id" :label="item.name" :value="item"></el-option>
              </el-select>
            </div>
            <div>
              <p>区域：</p>
              <el-select style="width:150px"
                v-model="areaSelect2"
                value-key="areaId"
                placeholder="选择区域"
                @change="changeArea"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
          </div>
          <p>单位：{{unitName}}</p>
        </div>
      </div>
      <div class="tableContainer">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          height="260px"
          class="tableTh28"
          ref="table"
        >
          <el-table-column label="年度完成率排名" width="70" align="center">
            <template slot-scope="scope">
              <img src="~@/assets/images/common/first.png" alt v-if="scope.$index == 1" />
              <img src="~@/assets/images/common/second.png" alt v-else-if="scope.$index == 2" />
              <img src="~@/assets/images/common/third.png" alt v-else-if="scope.$index == 3" />
              <span v-else>{{scope.$index}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in titleList"
            :key="index"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :width="item.width"
            show-overflow-tooltip
            min-width="60"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import bar from "./echarts/bar";
import lineData from "./echarts/lineData";

import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
export default {
  name: "incomeComp",
  components: {
    bar,
    lineData
  },
  data() {
    return {
      tableLoading: false,
      areaSelect: {
        areaId: "",
        areaName: ""
      },
      currentTime: "",
      leftTitle: "分区域完成",
      // rightTitle: "区域排名",
      areaSelect2: {
        areaId: "",
        areaName: ""
      },
      barSelect: {
        name: "",
        id: "1"
      },
      areaList: [],
      areaName:'',
      tableData: [],
      titleList: [],
      areaDataList:[],
      completeData:{},
      unitName:'万元',
      barTable: [
        {
          name: "主营业务",
          id: "1"
        },
        {
          name: "基本面",
          id: "2"
        },
        {
          name: "DICT",
          id: "3"
        },
        {
          name: "移动净增",
          id: "4"
        },
        {
          name: "移动新增",
          id: "5"
        },
        {
          name: "宽带净增",
          id: "6"
        },
        {
          name: "宽带新增",
          id: "7"
        },
        {
          name: "天翼高清净增",
          id: "8"
        },
        {
          name: "天翼高清新增",
          id: "9"
        }
      ],
      barSortTitle: [
        {
          name: "区域",
          prop: "areaName",
          // width: 90,
          align:"center"
        },
        {
          name: "年累计收入",
          align:"center",
          prop: "thisYearLj"
        },
        {
          name: "同比",
          align:"center",
          prop: "tbYearIncreaseRatePercent"
        },
        {
          name: "年度完成率",
          align:"center",
          prop: "completeLjRatePercent"
        },
        {
          name: "当月完成",
          prop: "thisMonthValue",
          align:"center",
        },
        {
          name: "环比",
          align:"center",
          prop: "hbAmt"
        },

      ],
      barData: [],
      radarData: {},
      accountInfo: ""
    };
  },
  mounted() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.areaSelect.areaId = this.accountInfo.areaId;
    this.areaSelect2.areaId = this.accountInfo.areaId;
    this.areaSelect2.areaName = this.accountInfo.areaName;
     this.areaName = this.accountInfo.areaName;
    this.init();

  },
  methods: {
    changeType(val) {
      switch (Number(val.id)) {
        case 1:
        case 2:
        case 3:
          break;
        case 4:
        case 5:
        case 6:
        case 7:
        case 8:
        case 9:
          break;
      }
      this.getLineData();
    },
    changeArea(val) {
      this.areaName = val.areaName
      console.log(val);
      this.getLineData();
    },
    //获取柱状图数据
    getLineData() {
      this.tableLoading = true;
      $budgetAPI.getLineData(
        {
          tjType: this.barSelect.id,
          areaId: this.areaSelect2.areaId,
        },
        res => {
          this.tableLoading = false;
          if (res.code == 0) {
            this.tableData = res.content.data;
            this.unitName = res.content.unit
            this.completeData = [];
           let obj={
              xAxis: [],
              yAxis: [],
            }
            res.content.sortData.map((item,index) =>{
                obj.xAxis[index] = item.areaName
                obj.yAxis[index] = item.completeLjRatePercent.split("%")[0]
            })
            this.completeData = obj
            let a = res.content.acctMonth;
            this.currentTime = a.substring(0,4) + "年" + a.substring(4,6) + "月";
            // var colorList = [
            //         '#7f92f7', '#7ba5f4', '#69bdfb', '#61d1eb','#53dda3',
            //         '#29aa74', '#6edd53', '#9ef90c','#d2dd53', '#eadf55', '#f4c178',
            //         '#f48892'
            //     ];
            // this.barData=[];
            // this.barData.push(res.content.data);
            // this.barData.push(this.areaName);
            // this.barData.push(res.content.currentData)
            // res.content.data.map((item,index)=>{
            //   item['color']=colorList[index]
            // })

            this.areaDataList = res.content.sortData
          } else {
            this.alertError(res);
          }
        },
        err => {}
      );
    },
    // changeRadar(val) {
    //   this.getRadarData();
    // },
    //根据层级获取区域树
    getCompanyByLvl() {
      $budgetAPI.getCompanyByLvl(
        {
          lvl: this.accountInfo.areaLvl,
          areaId: this.accountInfo.areaId
        },
        res => {
          this.alertError(res);
          res.content.unshift(this.accountInfo);
          this.areaList = res.content;
        },
        err => {}
      );
    },
    init() {
      this.titleList = this.barSortTitle;
      this.getCompanyByLvl();
      this.getLineData();
    }
  }
};
</script>

<style lang="scss" scoped>
.incomeComp {
  margin-top: 20px;
  width: 99%;
  height:320px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #dee5f3;
  display: flex;
  .radar {
    width: 50%;
    height: 100%;

    // border-right: 1px solid #dee5f3;
    .chartsSwitch {
      width: 72px;
      height: 27px;
      line-height: 25px;
      margin-top: 8px;
      text-align: center;
      border: 1px solid #dee5f3;
      border-radius: 3px;
      display: flex;
      overflow: hidden;
      span {
        width: 35px;
        cursor: pointer;
        display: inline-block;
        &.active {
          background-color: #00b7ee;
          color: #ffffff;
        }
      }
    }
    .radarArea{
       display: flex;
      .chartsArea {
        padding: 10px 20px;
        height: 280px;
        width: 100%;
        .radarContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: flex-end;
          }
        }
        .barContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: space-between;
            p {
              line-height: 28px;
              margin-right: 20px;
            }
          }
        }
      }
      .detailList{
        width: 55%;
        padding-top:30px;
        ul{
          height:230px;
          overflow-y: auto;
        }
        li{
          list-style: disc;
          line-height: 37px;
          height: 37px;
          float: left;
          width: 50%;
          span{
            color:#66709a;
            padding: 0 5px;
            font-size: 12px;
            &:first-child{
              font-weight: 700;
            }
          }
        }
      }
    }

  }
  .table {
    width: 50%;
    height: 100%;
    padding-right: 10px;
    .workTopTitle{
      .fr{
        div,p{
          display: inline-block;
        }

      }
    }
    .tableContainer {
      padding: 5px 0 10px 5px;
      height: 260px;
      overflow: hidden;
     /deep/ .el-table tbody tr:first-child  td:first-child .cell{
        display: none;
      }
     /deep/ .el-table::before{
           height: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.incomeComp {
  .option {
    .el-input__inner {
      padding: 0 14px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      vertical-align: middle;
      border-radius: 5px;
    }
    .el-input__icon{
      line-height: 28px;
    }
  }
  .tableContainer {
    padding: 5px 0 10px 5px;
    height: 260px;
    overflow: hidden;
    .el-table th{
      background-color:#f8f9fb!important;
    }
    .el-table td, .el-table th.is-leaf{
      border-bottom:none;
    }
    .el-table tr td:first-child .cell span{
      line-height: 20px;
      border-radius: 100px;
      background-color: #f0f2f5;
      height: 20px;
      width: 20px;
      display: inline-block;
    }
  }


}
</style>
